Next.js

Server Components vs Client Components in Next.js — Let’s Keep It Real.

Alright, let’s be honest — the whole “Server vs Client Components” thing confused almost everyone at some point.

Published at — Feb 2, 2025

Server Components vs Client Components in Next.js — Let’s Keep It Real.

Not because it’s hard… but because people explain it like a PhD thesis.

So let’s break it down like normal humans.

Backstage Crew vs Performers

Think of your app like a theater:

Server Components = backstage crew.
They set everything up — lights, props, sound — but never appear on stage.
Client Components = the actors.
They’re the ones talking to the audience and reacting to them.

When to Use a Server Component

Simple rule: If the user can’t interact with it → keep it on the server.

Fetching data
Rendering static UI
Doing logic/calculations that don’t need to run in the browser
No useState, no onClick

// Server Component (default in Next.js)
export default async function Products() {
  const products = await getAllProducts();
  return <ProductList items={products} />;
}

When to Use a Client Component

If the user touches it → it belongs on the client.

Buttons, forms, dropdowns
Toggles, animations
Anything with state or events

"use client";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Golden Rule

Always start as a Server Component.
Switch to Client only if you need interaction.

Don’t slap "use client" at the top of everything.
It’s not ketchup — stop putting it on every meal.

Mixing Them? Easy.

// Server Component
import Counter from "./Counter";

export default async function ProductPage() {
  const product = await getProduct();
  return (
    <div>
      <h1>{product.name}</h1>
      <Counter /> {/* Client Component inside Server Component */}
    </div>
  );
}

Quick Cheat Sheet

Situation	Server	Client
Fetching Data	✅	❌
Static Rendering	✅	❌
User Clicks / Inputs	❌	✅
Local State / Animations	❌	✅

You don’t need to overthink it.

If it needs the user’s brain → Client.
If it can run without them → Server.